<template>
    <div class="item" @click="clickHandle">
        <div class="imgWrap flex_c_c">
            <img v-lazy="data.img_url" alt />
        </div>
        <div class="title ellipsis_l1">{{ data.title }}</div>
        <slot name="footer">
            <div class="price">
                <span class="yuan">&yen; {{ data.sell_price }}</span>
                <span class="buy"> {{ data.buy }} 购买</span>
            </div>
        </slot>
    </div>
</template>

<script>
export default {
    props: {
        data: {
            type: Object,
            required: true,
        },
    },
    methods: {
        clickHandle(event) {
            this.$emit("click", this.data, event);
        },
    },
};
</script>

<style lang="scss" scoped>
.item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 225px;
    width: 49%;
    padding: 6px;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 4px;
    font-size: 14px;
    .imgWrap {
        height: 124px;
        width: 100%;
        img {
            height: 100%;
            width: 100%;
        }
    }

    .price {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .yuan {
            color: red;
            font-size: 16px;
            font-weight: 700;
        }

        .buy {
            font-size: 12px;
            color: #999;
        }
    }
}
</style>
